<template>
  <div class="starfield-background" ref="starfieldRef"></div>
  
  <UserMenu @open-profile="isProfileModalOpen = true" />
  <UserProfileModal :is-open="isProfileModalOpen" @close="isProfileModalOpen = false" />
  <Sidebar :is-open="isSidebarOpen" @close="isSidebarOpen = false" />
  
  <div class="overlay" v-if="isSidebarOpen" @click="isSidebarOpen = false"></div>
  
  <router-view @toggle-sidebar="isSidebarOpen = true" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useStore } from 'vuex';
import { createStarfield } from '@/utils/animations.js';
import UserMenu from '@/components/UserMenu.vue';
import UserProfileModal from '@/components/UserProfileModal.vue';
import Sidebar from '@/components/Sidebar.vue';

const starfieldRef = ref(null);
const isProfileModalOpen = ref(false);
const isSidebarOpen = ref(false);
const store = useStore();
const roles = ["SG", "SW", "DF"];

onMounted(async () => {
  if (starfieldRef.value) {
    createStarfield(starfieldRef.value);
  }
  if (store.getters['sessions/shouldRefresh']) {
    await store.dispatch('sessions/fetchSessions', roles)
  }
});
</script>

<style>
/* 仅保留应用级的关键样式，其余放入 main.css */
.starfield-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
}
</style>